﻿@model ServerDataModel.SearchTrackingInfo

@{
    ViewBag.Title = "TrackingDetails";
    string trackingItemName = Model.TrackabeItemName;
    string trackingState = Model.State;  
}
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<!-- This css is to ensure that the google map contols (zoom bar etc) show and size correctly. -->
<style>
#map_canvas img{max-width:none}
</style>

<!-- This css is to give a nice big popup "info window" when a marker is clicked on the map -->
<style>
    .infoDiv {
    height: 200px;    
    width: 300px; 
    -webkit-user-select: none; 
    background-color: white; 
    }
</style>



<!-- Enclose the Javascript in a "section" so that it is rendered in the correct order after scripts have been loaded etc -->
@section scripts {
    <section class="scripts">
@{
    if (Model.SupportsGeolocationServices)
    {
        <script type="text/javascript">

    <!--This
//    code
//    tells
//    the
//    browser
//    to
//    execute
//    the
//    "Initialize"
//    method
//    only
//    when
//    the
//    complete
//    document
//    model
//    has
//    been
//    loaded.-->
    $(document).ready(function() {
        Initialize();
    });

    // Where all the fun happens 

    function Initialize() {

        // Google has tweaked their interface somewhat - this tells the api to use that new UI
        google.maps.visualRefresh = true;
        var Liverpool = new google.maps.LatLng(53.408841, -2.981397);

        // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
        var mapOptions = {
            zoom: 14,
            center: Liverpool,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            // mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };

        // This makes the div with id "map_canvas" a google map
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
        var myLatlng = new google.maps.LatLng(53.40091, -2.994464);
        var bounds = new google.maps.LatLngBounds();
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Tate Gallery'
        });

        // You can make markers different colors...  google it up!
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

        // a sample list of JSON encoded data of places to visit in Liverpool, UK
        // you can either make up a JSON list server side, or call it from a controller using JSONResult
        var data = [
            { "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours": "9-5, M-F", "GeoLong": "53.410146", "GeoLat": "-2.979919" },
            { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
            { "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
            { "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" },
            { "Id": 5, "PlaceName": "Minsk", "OpeningHours": "10-6, M-F", "GeoLong": "53.90000", "GeoLat": "27.566666" }
        ];

        // Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
        $.each(data, function(i, item) {
            var pos = new google.maps.LatLng(item.GeoLong, item.GeoLat);
            var marker = new google.maps.Marker({
                'position': pos,
                'map': map,
                'title': item.PlaceName
            });

            bounds.extend(pos);
            // Make the marker-pin blue!
            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

            // put in some information about each json object - in this case, the opening hours.
            var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'><h2>" + "@trackingItemName" + "</h2>" + "<div><h4>State: " + "@trackingState" + "</h4></div></div>"
            });

            // finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

        })

        map.fitBounds(bounds);
    } </script>
    }
}
</section>
}


<h2>TrackingDetails</h2>
<div>
    @{
      
        @Html.QRCode(Model.QrData, 150); 
    }
    
</div>
<fieldset>
    <legend>SearchTrackingInfo</legend>

    <div class="display-label">
        <h3>@Html.DisplayNameFor(model => model.TrackingName)</h3>
    </div>

    <div class="display-field">
        @Html.DisplayFor(model => model.TrackingName)
    </div>

    <div class="display-label">
        <h3>@Html.DisplayNameFor(model => model.TrackabeItemName)</h3>
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.TrackabeItemName)
    </div>

    <div class="display-label">
        <h3>@Html.DisplayNameFor(model => model.State)</h3>
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.State)
    </div>
</fieldset>

@* details*@

<h2>History</h2>
<table>
<tr>
    <th>
        @Html.DisplayNameFor(model => model.History[0].CreatedDate)
    </th>
    <th>
        Status
    </th>
    <th>
        @Html.DisplayNameFor(model => model.History[0].Comment)
    </th>
        
</tr>
    
    @foreach (var item in Model.History) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CreatedDate)
        </td>
        <td>
            @ViewBag.StateNames[item.StateId.ToString()]
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Comment)
        </td>
    </tr>
}

</table>

@* end of details *@


<p>
   @* @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) |*@
    @Html.ActionLink("Search new tracking", "Index")
</p>

@{
    if (Model.SupportsGeolocationServices)
    {
    <h2>Geolocation data</h2>

    <!-- This is the div that will contain the Google Map -->
    <div id="map_canvas" style="height: 400px; width: 600px"></div>
    }
}